<template>
  <div>
    <van-nav-bar class="headers" title="个人空间" fixed @click-left="openLeftPopup">
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
    </van-nav-bar>
    <div class="main-container">
      <van-row class="user-card" type="flex" align="center">
        <van-col span="6">
          <van-image
            round
            class="photo"
            :src="$store.state.userinfo.image"
            width="70px"
            height="70px"
            @click="uploadImage=true"
          />
        </van-col>
        <van-col>
          <h2>{{ $store.state.userinfo.username }}</h2>
          <p>{{ $store.state.userinfo.statement }}</p>
        </van-col>
      </van-row>
      <van-popup v-model="uploadImage" position="bottom" :style="{ height: '20%' }">
        <van-divider>上传头像</van-divider>
        <van-uploader
          :max-size="3 * 1024 * 1024"
          @oversize="onOversize"
          upload-text="上传头像"
          :after-read="ReadImage"
        />
      </van-popup>
      <!-- <van-popup v-model="previewImg">
          <img :src="item2" />
      </van-popup> -->
      <van-grid>
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的主页" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的关注" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的收藏" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的好友" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="浏览记录" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的发布" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的评论" />
        <van-grid-item icon="./static/icon/qq_icon.png" text="我的回复" />
      </van-grid>
      <van-cell-group class="my-cell">
        <van-cell title="手机号" is-link :value="phone" />
        <van-cell title="邮箱" is-link :value="email" />
        <van-cell title="密码修改" is-link to="/ChangePassword" />
        <van-cell title="资料修改" is-link to="/PersonInfo" />
        <van-cell title="意见反馈" />
      </van-cell-group>
      <van-button round type="primary" style="width:60%" @click="toLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Account',
  data() {
    return {
      uploadImage: false,
      image: '',
      previewImg:false,
      item2:''
    }
  },
  computed: {
    phone() {
      if (this.$store.state.userinfo.phone) {
        return this.$store.state.userinfo.phone
      } else {
        return '未绑定'
      }
    },
    email() {
      if (this.$store.state.userinfo.email) {
        return this.$store.state.userinfo.email
      } else {
        return '未绑定'
      }
    }
  },
  methods: {
    ...mapMutations(['openLeftPopup']),
    toLogout() {
      this.$http
        .get('/account/logout')
        .then(res => {
          if (res.data.status === 200) {
            this.$dialog({ message: res.data.msg })
            this.$store.state.userinfo.username = null
            this.$router.push('/home')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onOversize() {
      this.$dialog({ message: '请上传小于3M的图片' })
    },
    ReadImage(file) {
      let content = file.file
      let data = new FormData()
      console.log(file)
      data.append('img', content)
      this.$http
        .post('/account/upload/headimg', data)
        .then(res => {
          if(res.data.status===200)
          {
            this.commen.getuserinfo()
            this.uploadImage = false
            this.previewImg = true
            this.item2 = res.data.img
          }
        })
        .catch(err => {})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.main-container {
  padding-top: 10px;
  background-color: #fff;
}
.user-card {
  height: 80px;
  margin: 2px 5px;
}
.user-card .photo {
  position: relative;
  height: 100%;
  margin: auto 5px;
}
.user-card h2 {
  margin: 5px 0;
  margin-left: 5px;
  text-align: left;
  font-size: 20px;
}
.user-card p {
  margin-left: 5px;
  margin: 5px 0;
  text-align: left;
  font-size: 13px;
}
.my-cell {
  text-align: left;
  padding: 10px 15px;
}
</style>
